<template>
	<view class="content">
		<view class="tabs" v-if="tabs.length > 1">
			<view class="tab" :class="{active:k == tabsIndex}" @click="changeTabsIndex(k)" v-for="(v,k) in tabs">
				{{v.name}}
			</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="v in list">
				<view class="list-item-top">
					<view class="list-item-top-left">
						<image :src="v.receive.avatar"></image>
						<view>
							<view class="nickname">{{v.receive.nickname}}</view>
							<view class="mobile">{{v.receive.mobile}}</view>
						</view>
					</view>
					<view>
						<view class="price">-{{sub(v)}}</view>
						<view class="desc">转出</view>
					</view>
				</view>
				<view class="list-item-bottom">
					<view>手续费：{{v.service_price}}</view>
					<view>流水号：{{v.order_sn}}</view>
					<view class="time">{{v.createtime_text}}</view>
				</view>
			</view>
			<wanl-empty v-if="!list.length"></wanl-empty>
		</view>
	</view>
</template>
<script>
	import {
		getDonateList
	} from '@/API/wallet.js'
	export default {
		data() {
			return {
				tabs: [],
				tabsIndex: 0,

				list: [],
				page: 1,
				totalPage: 1
			}
		},
		mounted() {
			this.$commonNetwork.getUserIdenInfoData((res) => {
				//如果是商家 才会有销售钱包
				if (res.code === 1) {
					this.tabs.push({
						name: '销售钱包',
						field: 'sell'
					})
				}
				//普通用户和城市合伙人才有红包钱包
				// if (res.code === 0 || res.partner_type === 3) {
					this.show.push('bribe')
				// }
				//城市合伙人才会有分佣钱包  身份类型:1=个人合伙人,2=商户合伙人,3=城市服务商
				if (res.partner_type !== null) {
					this.tabs.push({
						name: '分佣钱包',
						field: 'commission'
					})
				}
				this.page = 1
				this.getList()
			});
		},
		onPullDownRefresh() {
			this.init()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			sub(item) {
				return ((item.money * 10000 + item.service_price * 10000) / 10000).toFixed(2)
			},
			init() {
				this.page = 1
				this.getList()
			},
			changeTabsIndex(k) {
				this.tabsIndex = k
				this.init()
			},
			getList() {
				if (this.page > this.totalPage) return
				getDonateList({
					page: this.page,
					wallet_type: this.tabs[this.tabsIndex].field
				}).then(res => {
					console.log('-=-=-=res', res)
					let list = res.data.data
					if (this.page > 1) {
						list = this.list.concat(res.data.data)
					}
					this.list = list
					this.page++
					this.totalPage = res.data.last_page || 1
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.content {
		// padding: 0 20rpx 20rpx;

		.tabs {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100rpx;
			position: fixed;
			top: 0rpx;
			left: 0;
			width: 750rpx;
			background-color: #F6F6F6;
			padding-bottom: 20rpx;
			z-index: 10;

			.tab {
				position: relative;
			}

			.tab.active::before {
				content: '';
				position: absolute;
				width: 30rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #DD551B, #F49355);
				border-radius: 3rpx;
				bottom: -20rpx;
				left: 0;
				right: 0;
				margin: auto
			}
		}

		.list {
			margin-top: 120rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			&-item {
				padding: 20rpx;
				display: flex;
				background-color: #fff;
				justify-content: space-between;
				flex-direction: column;

				&-top {
					display: flex;
					padding: 20rpx;
					border-bottom: 1px solid #aaa;
					justify-content: space-between;
					align-items: center;

					&-left {
						display: flex;
						gap: 20rpx;

						image {
							width: 70rpx;
							height: 70rpx;
							border-radius: 100%;
						}

						>view {
							display: flex;
							flex-direction: column;
							gap: 20rpx;
							justify-content: center;

							.nickname {
								font-weight: bold;
								font-size: 30rpx;
							}

							.mobile {
								font-size: 20rpx;
								color: #aaa;
							}
						}
					}

					>view:nth-child(2) {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						gap: 10rpx;
					}

					.price {
						color: rgb(87, 166, 240);
					}

					.desc {
						color: #aaa;
						font-size: 24rpx;
					}
				}

				&-bottom {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					gap: 10rpx;

					.time {
						margin-top: 10rpx;
						color: #aaa;
					}
				}
			}
		}
	}
</style>